<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>09-获取多个dom元素.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>

    <div>123</div>

    <script>

      /* 
      querySelectorAll 不管你的选择器写对与否，返回值都是数组 
      querySelector  
        1 能找到 返回 dom元素 dom对象
        2 找不到了  返回null 
      
       */



      // querySelector 只能获取第一个符合要求的li标签
      // let li = document.querySelector('li');

      // 获取所有的li标签 返回一个数组
      // let lis = document.querySelectorAll('li');

      // // 数组就可以和循环搭配
      // for (let index = 0; index < lis.length; index++) {
      //   // lis[index]  dom元素

      //   // 文本
      //   lis[index].innerText = `这个是li标签 ` + index;
      // }

      // let divs = document.querySelectorAll('div');
      // console.log(divs); // 输出什么 ？ 空数组！！ 
      // console.log(divs); // 输出什么 [ div dom元素 ]  1个元素 


      console.log( document.querySelector("button") );
    </script>
  </body>
</html>
